const faces = [
  {
    face: "https://gd-hbimg.huaban.com/5bd31276c5b4db44ce20bb5a22061165fa900ed6c2ac-zOd1NZ_fw658",
    src: "#",
    alt: "face1",
  },
  {
    face: "https://gd-hbimg.huaban.com/765e9e37950fbff54f915518b0245104ae99e2e575228-vm0bvr_fw658",
    src: "#",
    alt: "face2",
  },
  {
    face: "https://gd-hbimg.huaban.com/727e8dfaee4a1c0b94f4435ed066ae281c91ef1d8f71-d0oHUR_fw658",
    src: "#",
    alt: "face3",
  },
  {
    face: "https://gd-hbimg.huaban.com/f1572e8d14dcd58d685376a8876efe6d82dd4ce629346-gBlXZc_fw658",
    src: "#",
    alt: "face4",
  },
];

const faceContainer = document.querySelector(".face-container");

const createFaceElement = (faceItem) => {
  let faceElement = document.createElement("div");
  faceElement.className = "face";
  let faceImage = document.createElement("img");
  faceImage.src = faceItem.face;
  faceImage.alt = faceItem.alt;
  faceElement.appendChild(faceImage);
  return faceElement;
};

faces.forEach((faceItem) => {
  let faceElement = createFaceElement(faceItem);
  faceContainer.appendChild(faceElement);
});

const processElement = document.querySelector(".process-bar");
const percentageElement = document.querySelector(".percentage");
const processBeforeStyle = getComputedStyle(processElement, ":before");
const maxProcessWidth = processElement.offsetWidth;

const changeProcessWidth = () => {
  let currentProcessWidth = Math.ceil(parseFloat(processBeforeStyle.width));
  if (currentProcessWidth == maxProcessWidth) currentProcessWidth = 0;
  let setWidth = parseInt((currentProcessWidth / maxProcessWidth) * 100);
  setWidth += Math.floor(Math.random() * 30) + 1;

  if (setWidth >= 100) setWidth = 100;
  console.log(setWidth);

  processElement.style.setProperty("--bar-width", setWidth + "%");
  percentageElement.textContent = setWidth + "%";
};
setInterval(changeProcessWidth, 500);
